<template>
  <div class="index">
    <el-container>
      <el-header id="header">
        <h1>在线工具</h1>
      </el-header>

      <el-main id="main">
        <h3>在线文字转声音工具</h3>
        <el-row :gutter="20" class="marginTop-20">
          <el-col :span="10">
            <p class="p-title c-info">
              请粘贴需要转声音的文字（最多
              <span class="red">20000</span>个汉字，含标点符号）：
            </p>
            <p class="p-title c-info">
              需要停顿，在停顿处输入以下符号：
              <span class="red">[=#4]</span>
            </p>
            <el-input
              v-loading="loading"
              element-loading-text="拼命转换中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              type="textarea"
              v-model="textarea"
              maxlength="20000"
              show-word-limit
              resize="none"
              placeholder="请输入内容"
            ></el-input>
          </el-col>

          <el-col :span="10" class="marginTop-50">
            <el-form label-width="80px" size="mini">
              <el-form-item label="音调：">
                <el-select v-model="pitch" placeholder="请选择" style="width:100px">
                  <el-option
                    v-for="item in pitch_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="语速：">
                <el-select v-model="speed" placeholder="请选择" style="width:100px">
                  <el-option
                    v-for="item in speed_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="音质：">
                <el-radio-group v-model="quality">
                  <el-radio :label="1">普通</el-radio>
                  <el-radio :label="2">优质</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="发言人：">
                <el-radio-group v-model="voice_name">
                  <el-radio :label="1">女声</el-radio>
                  <el-radio :label="2">男声</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item size="large">
                <el-button type="primary" :icon="btn_icon" @click="change">{{btn_msg}}</el-button>
                <el-button
                  type="primary"
                  icon="el-icon-video-play"
                  @click="audition"
                  :disabled="!isSuccess"
                >声音试听</el-button>
                <el-button
                  type="primary"
                  icon="el-icon-download"
                  :disabled="!isSuccess"
                  @click="download"
                >下载声音</el-button>
              </el-form-item>
            </el-form>
            <section class="msg">
              <el-alert :title="msg" type="success" v-if="isSuccess" show-icon></el-alert>
              <audio :src="audio_url" ref="myaudio"></audio>
            </section>
          </el-col>
        </el-row>
      </el-main>

      <el-footer id="footer" class="marginTop-50">
        <p align="center">
          本工具由english163.com提供，| © 2003-2019 广州格灵信息科技有限公司 版权所有 推荐使用IE9.0以上版本的浏览器
          <a
            href="http://www.beian.miit.gov.cn/"
            target="_blank"
          >粤ICP备15051375号-2</a>
        </p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "index",
  components: {},
  data() {
    return {
      btn_icon: "el-icon-refresh",
      btn_msg: "开始转换",
      loading: false,
      audio_url: "",
      textarea: "",
      pitch: 3,
      pitch_list: [
        {
          value: 1,
          label: "超低"
        },
        {
          value: 2,
          label: "稍低"
        },
        {
          value: 3,
          label: "正常"
        },
        {
          value: 4,
          label: "较高"
        },
        {
          value: 5,
          label: "非常高"
        }
      ],
      speed_list: [
        {
          value: 1,
          label: "超慢"
        },
        {
          value: 2,
          label: "稍慢"
        },
        {
          value: 3,
          label: "正常"
        },
        {
          value: 4,
          label: "较快"
        },
        {
          value: 5,
          label: "非常快"
        }
      ],
      quality: 1,
      voice_name: 1,

      speed: 3,
      msg: "",
      isSuccess: false
    };
  },
  watch: {
    textarea: function(val) {
      if (val.length >= 20000) {
        this.$message.error(
          "注意，最多只能输入20000个汉字，含标点符号，多出部分会被截取。"
        );
      }
    }
  },
  methods: {
    // 点击转化
    change() {
      // 符合条件才能请求
      if (this.textarea.trim() && this.textarea.trim().length < 20000) {
        this.$refs.myaudio.pause();
        this.loading = true;
        this.btn_msg = "转换中...";
        this.btn_icon = "el-icon-loading";
        this.isSuccess = false;
        this.msg = "";
        // 参数转化成FormData
        let myformdata = new FormData();
        myformdata.append("content", this.textarea);
        myformdata.append("pitch", this.pitch);
        myformdata.append("quality", this.quality);
        myformdata.append("speed", this.speed);
        myformdata.append("voice_name", this.voice_name);
        // 转换请求
        this.$http
          .post("http://12.12.12.92:5003/api/transform.php", myformdata)
          .then(res => {
            if (res.data.code == 200) {
              this.isSuccess = true;
              this.audio_url = res.data.data.audio_url;
              this.msg =
                "恭喜您，转换成功！您可以点击声音试听，或下载声音文件(下载链接30分钟内有效)！";
            } else {
              this.$message.error(res.data.msg);
            }
            this.loading = false;
            this.btn_msg = "开始转换";
            this.btn_icon = "el-icon-refresh";
          });
      } else {
        this.loading = false;
        this.btn_msg = "开始转换";
        this.btn_icon = "el-icon-refresh";
        this.$message.error("请输入需要转换的文字");
      }
    },
    // 点击试听
    audition() {
      let my_audio = this.$refs.myaudio;
      my_audio.play();
    },
    // 点击下载
    download() {
      if (this.audio_url) {
        let url =
          "http://12.12.12.92:5003/api/download.php?audio_url=" +
          this.audio_url;
        location.href = url;
      }
    }
  },
  mounted() {}
};
</script>
)
<style lang="less">
* {
  padding: 0;
  margin: 0;
}
.red {
  color: red;
}
.c-info {
  color: #909399;
}
.marginTop-50 {
  margin-top: 50px;
}
.marginTop-20 {
  margin-top: 20px;
}
#header {
  background: #006cbf;
  height: 55px;
  position: relative;
  z-index: 1;
  h1 {
    line-height: 55px;
    color: #ffffff;
  }
}

#main {
  margin-top: 20px;
  .el-textarea__inner {
    height: 400px;
  }
  .p-title {
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 10px;
  }
}
#footer {
  background: #e4e7ed;
  line-height: 60px;
  font-size: 12px;
  font-weight: 400;
  padding-bottom: 10px;
  color: #909399;
}
</style>